CSS - W jaki sposób osiągnąć taki efekt?

W jaki sposób zrealizowalibyście efekt tych 3 kroków? Tam nic się ma nie zmieniać. Tylko wyświetlanie kółek i kresek. Czy całość jako SVG, czy może kółka beforami, ale co z kreskami wtedy? Całość absolutem?

Szukam dobrego scenariusza, bo sam nie wiem, co będzie najlepsze.

 Zrzut ekranu 2015-11-02 o 15.56.32.png   212,69 KB   0 Ilość pobrań

Stoi to na bootstrapie, i są tam 3 boxy w kolumnach col-md-4. 

Nie możesz podglądnąć źródła? Chyba że to projekt i trzeba to zakodować?

Proponuję coś w ten deseń:

http://codepen.io/anon/pen/qOyzrM

* oczywiście numerek ostylowany na pałę niekoniecznie z wymiarami z grafiki etc.

Użytkownik unbreak edytował ten post 04 listopada 2015 - 08:36

Gdyby nie wzmianka o BS, spróbowałbym to zrobić na numerowanej liście + zagnieżdżony kontener z zawartością [border-top 1px + ujemny górny margines].

Co prawda BS zajmie się automatycznie AWD, ale na własną rękę css byłby króciutki.

Mimo wszystko, minimalizacja html-a nie wchodzi tu w ogóle w grę (swoją drogą nie pamiętam kiedy widziałem coś takiego jak minimalizacja kodu html)

Dobra, coś tam wykombinuje. 

Wrzuce efekt koncowy

Przecież wrzuciłem Ci gotowe rozwiązanie

Przecież wrzuciłem Ci gotowe rozwiązanie

No nie do konca. Raz, że każdy z tych lementów jest w osobnym kontenerze col-md-4. Czyli linie nie będą się dotykać (minusowe marginesy). Dwa, że na mobilkach te boxy beda jeden pod drugim i trzeba w pionie to sieknac ;p

UPDATE:
Tak jak byś tutaj nad tymi elementami mial to dodac: http://getbootstrap....ples/jumbotron/

Zonic, na prawdę nie widzę problemu

 1.png   120 KB   0 Ilość pobrań

Tylko border dałem kolumnie, teraz w rwd odpowiednio w momencie kiedy kolumny przechodzą jedna pod drugą ustawiasz border top none, za to border left ustawiasz tak jak było, a elementowi z numerem margin-top ustawiasz na 0 a margin-left na -11px czy ile tam będzie potrzeba wg wielkości kółka

 2.png   36,51 KB   0 Ilość pobrań

No chyba że ja czegoś tutaj nie pojmuję

+ oczywiście jeżeli te numery mają iść niżej to dodajesz im float left i margin-topem ustawiasz odpowiednio

Zonic, na prawdę nie widzę problemu

1.png

 

Tylko border dałem kolumnie, teraz w rwd odpowiednio w momencie kiedy kolumny przechodzą jedna pod drugą ustawiasz border top none, za to border left ustawiasz tak jak było, a elementowi z numerem margin-top ustawiasz na 0 a margin-left na -11px czy ile tam będzie potrzeba wg wielkości kółka

2.png

 

No chyba że ja czegoś tutaj nie pojmuję

+ oczywiście jeżeli te numery mają iść niżej to dodajesz im float left i margin-topem ustawiasz odpowiednio

Dobrze pojmujesz Po prostu na sucho na to patrzyłem, bo dopiero kończę projekt Za daleko szukałem. Dzięki

Podeślę efekt końcowy.